<template>
  <div>
    <div>
      <button class="btn" @click="changeName">点击</button>
      <hr />
      <p>{{ name }}</p>
      <p>{{ age }}</p>
      <p>{{ address }}</p>
    </div>

    <hr />
    <input type="file" multiple />

    <hr />
    <div class="container"></div>
    游戏列表:
    <ul>
      <li v-for="item in games" :key="item.id">{{ item.name }}</li>
    </ul>
    <button @click="ChangeGameName">修改游戏名字</button>

    <hr>
    <div>
      <h1>toRefs and toRef</h1>
      <h2>姓名:{{ nameToRefs }}</h2>
      <h2>年龄:{{ ageToRefs }}</h2>
      <button @click="changeNametoRefs">改名字</button> <br /> <br />
      <button @click="changeAgetoRefs">改年龄</button>
    </div>
  </div>
</template>

<script setup lang="ts">
  import { reactive, ref, toRefs } from 'vue';
  let name = ref('张三');
  let age = 18;
  let address = '北京市昌平区宏福苑～洪福科技园';
  let games = reactive([
    { id: 'dowhadouwnad01', name: '英雄联盟' },
    { id: 'dowhadouwnad02', name: '穿越火线' },
    { id: 'dowhadouwnad03', name: '地下城与勇士' },
  ]);

  let person = reactive({
    nameToRefs: '德莱文',
    ageToRefs: 30
  })

  let { nameToRefs, ageToRefs } = toRefs(person)
  /**
   * 这段代码相当于是这样
   * let x = toRefs(person);
   * x = {
   *  nameToRefs = ref(nameToRefs)
   *  ageToRefs = ref(ageToRefs)
   * }
   * 所以你可以直接解构。相当于拿到的就是响应式数据
   */

  function changeName() {
    name.value = 'James';
  }

  function ChangeGameName() {
    games[0].name = '流星蝴蝶剑';
  }


  function changeNametoRefs() {
    person.nameToRefs = '锐雯';
  }
  function changeAgetoRefs() {
    person.ageToRefs++;
  }
</script>

<style scoped>
  .btn {
    color: #666;
  }
</style>
